<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>淘宝网-淘！我喜欢</title>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="icon" href="taobao.ico"/>
    <!--设置url-->
    <base target="_blank"/>
</head>
<body>
        <!--
        内容
        颜色块
        间距
        边框
        -->
        <!--头部信息-->
        <div id="headMessage" class="clearfix layer">
            <!--左边-->
            <ul class="fl">
                <li class="title">
                    <span>中国大陆</span>
                    <span class="iconfont arrow">&#xe502;</span>
                </li>

                <li class="mr7">
                    <a href="#" class="login mr7">亲，请登录</a>
                    <a href="#">免费注册</a>
                </li>

                <li>
                    <a href="#">手机逛淘宝</a>
                </li>
            </ul>

            <!--右边-->
            <ul class="fr">
                <li>
                    <a href="#">我的淘宝</a>
                    <span class="iconfont arrow">&#xe502;</span>
                </li>

                <li>
                    <span class="iconfont mr5 c4">&#xe504;</span>
                    <a href="#">购物车</a>
                    <strong>0</strong>
                    <span class="iconfont arrow">&#xe502;</span>
                </li>

                <li>
                    <a href="#"><span class="iconfont mr5 store">&#xe643;</span>收藏夹</a>
                    <span class="iconfont arrow">&#xe502;</span>
                </li>

                <li>
                    <a href="#">商品分类</a>
                </li>

                <li class="line">|</li>
                
                <li>
                    <a href="#">千牛卖家中心</a>
                    <span class="iconfont arrow">&#xe502;</span>
                </li>

                <li>
                    <a href="#">联系客服</a>
                    <span class="iconfont arrow">&#xe502;</span>
                </li>

                <li>
                    <span class="iconfont c4 mr5">&#xe501;</span>
                    <a href="#">网站导航</a>
                    <span class="iconfont arrow">&#xe502;</span>
                </li>

            </ul>

        </div>

        <!--头部搜索-->
        <div id="headSearch">
            <div class="clearfix layer">
                <!--<h1><a href="#"><img src="images/taobao.png" alt="淘宝网"/></a></h1>-->
                <h1 class="fl"><a href="#">淘宝网</a></h1>
                <div class="code fr">
                    <span class="iconfont close">&#xe50c;</span>
                    <span class="c5">手机淘宝</span>
                    <img src="images/code.png" alt=""/>
                </div>
                <div class="search">
                    <ul class="searchTab clearfix">
                        <li class="active">宝贝</li>
                        <li>天猫</li>
                        <li>店铺</li>
                    </ul>
                    <div class="searchContent clearfix">
                        <form action="">
                        <div class="searchBox fl">
                            <input type="text"/>
                            <div class="placeholder">
                                <i class="iconfont">&#xe503;</i>
                                <span>网红裤腰带 洋气 国际范 9.9包邮 </span>
                            </div>
                            <span class="iconfont imgSearch">&#xe612;</span>
                        </div>
                        <div class="btn fl">
                            <button type="submit">搜索</button>
                        </div>
                        </form>
                    </div>
                    <div class="hotKey">
                        <a href="#" class="c5">积木</a>
                        <a href="#">网线</a>
                        <a href="#" class="c5">爬行垫</a>
                        <a href="#">时尚连衣裙</a>
                        <a href="#">男士T恤</a>
                        <a href="#" class="c5">时尚休闲裤</a>
                        <a href="#">粽子</a>
                        <a href="#">沙发</a>
                        <a href="#">风扇</a>
                        <a href="#">定制窗帘</a>
                        <a href="#">男士内裤</a>
                        <a href="#">凉席三件套</a>
                        <a href="#">办公桌</a>

                    </div>
                </div>
            </div>

        </div>

        <!--头部导航-->
        <div id="nav" class="layer clearfix">
            <h2 class="fl">主题市场</h2>
            <ul>
                <li class="size"><a href="#">天猫</a></li>
                <li class="size"><a href="#">聚划算</a></li>
                <li class="size"><a href="#">天猫市场</a></li>
                <li class="line">|</li>
                <li><a href="#">淘抢购</a></li>
                <li><a href="#">电器城</a></li>
                <li><a href="#">司法拍卖</a></li>
                <li><a href="#">淘宝心选</a></li>
                <li><a href="#">兴农扶贫</a></li>
                <li class="line">|</li>
                <li><a href="#">飞猪旅行</a></li>
                <li><a href="#">智能生活</a></li>
                <li><a href="#">苏宁易购</a></li>
            </ul>

        </div>

        <!--首屏内容-->
        <div id="firstScreen" class="layer clearfix">
            <!--左边的内容-->
            <div class="firstLeft fl">
                <!--侧边导航-->
                <div class="sideNav fl">
                    <ul>
                        <li>
                            <a href="">女装</a> / <a href="">男装</a> / <a href="">内衣</a><span class="iconfont fr">&#xe513;</span>
                        </li>

                        <li>
                            <a href="">鞋靴</a> / <a href="">箱包</a> / <a href="">配件</a><span class="iconfont fr">&#xe513;</span>
                        </li>

                        <li>
                            <a href="">童装玩具</a> / <a href="">孕产</a> / <a href="">用品</a><span class="iconfont fr">&#xe513;</span>
                        </li>

                        <li>
                            <a href="">家电</a> / <a href="">数码</a> / <a href="">手机</a><span class="iconfont fr">&#xe513;</span>
                        </li>

                        <li>
                            <a href="">美妆</a> / <a href="">洗护</a> / <a href="">保健品</a><span class="iconfont fr">&#xe513;</span>
                        </li>

                        <li>
                            <a href="">珠宝</a> / <a href="">眼镜</a> / <a href="">手表</a><span class="iconfont fr">&#xe513;</span>
                        </li>

                        <li>
                            <a href="">运动</a> / <a href="">户外</a> / <a href="">乐器</a><span class="iconfont fr">&#xe513;</span>
                        </li>

                        <li>
                            <a href="">游戏</a> / <a href="">动漫</a> / <a href="">影视</a><span class="iconfont fr">&#xe513;</span>
                        </li>

                        <li>
                            <a href="">美食</a> / <a href="">生鲜</a> / <a href="">零食</a><span class="iconfont fr">&#xe513;</span>
                        </li>

                        <li>
                            <a href="">鲜花</a> / <a href="">宠物</a> / <a href="">衣资</a><span class="iconfont fr">&#xe513;</span>
                        </li>

                        <li>
                            <a href="">工具</a> / <a href="">装修</a> / <a href="">建材</a><span class="iconfont fr">&#xe513;</span>
                    </li>

                        <li>
                            <a href="">家具</a> / <a href="">家饰</a> / <a href="">家纺</a><span class="iconfont fr">&#xe513;</span>
                    </li>

                        <li>
                            <a href="">汽车</a> / <a href="">二手车</a> / <a href="">用品</a><span class="iconfont fr">&#xe513;</span>
                    </li>

                        <li>
                            <a href="">办公</a> / <a href="">DIV</a> / <a href="">五金电子</a><span class="iconfont fr">&#xe513;</span>
                    </li>

                        <li>
                            <a href="">百货</a> / <a href="">餐厨</a> / <a href="">家庭保健</a><span class="iconfont fr">&#xe513;</span>
                        </li>

                        <li>
                            <a href="">学习</a> / <a href="">卡卷</a> / <a href="">本地服务</a><span class="iconfont fr">&#xe513;</span>
                        </li>


                    </ul>

                </div>
                <!--图片1容器-->
                <div class="img1Box fr">
                    <div class="pic fl">
                        <div class="img">
                            <a href="#"><img src="images/xx.jpg" alt=""/></a>
                        </div>
                        <button class="iconfont leftBtn">&#xe513;</button>
                        <button class="iconfont rightBtn">&#xe513;</button>
                        <div class="circle">
                            <span class="active"></span><span></span><span></span><span></span><span></span>
                        </div>

                    </div>
                    <div class="ad fr">
                        <a href=""><img src="images/dd.jpg" alt=""/></a>
                    </div>

                </div>

                <!--图片2容器-->
                <div class="img2Box fr">
                    <div class="pic fl">
                        <div class="picTitle">
                            <div class="text clearfix">
                                <span class="fl bg">理想生活上天猫</span>
                                <span class="fr"><i>1</i>/6</span>
                            </div>
                            <div class="line">
                                <span></span>
                            </div>
                        </div>

                        <div class="img">
                            <a href="#"><img src="images/t3.jpg" alt=""/></a><a href="#"><img src="images/t4.jpg"
                                                                                               alt=""/></a>
                        </div>
                        <button class="iconfont leftBtn">&#xe513;</button>
                        <button class="iconfont rightBtn">&#xe513;</button>

                    </div>
                    <div class="ad fr">
                        <p class="title">今日热卖</p>
                        <a href="#"><img src="images/t5.jpg" alt=""/></a>
                    </div>

                </div>
                <!--淘宝头条-->
                <div class="news fl">
                   <div class="hd fl">
                       <h3>淘宝头条</h3>
                       <p>让你的生活更有趣</p>
                   </div>
                    <div class="newList fr">
                        <div class="item">
                            <a href="#" class="img fl"><img src="images/tt.jpg" alt=""/></a>
                            <h4><a href="#">微漫酱访谈第三期：超萌舞见弥音音！</a></h4>
                            <p><a href="">哈喽，大家好，我是你们可爱的微漫酱，今天我们请到了一位舞见小姐姐来做客我们的访谈事，她就是弥音音！</a></p>
                            <a href="#" class="more">更多</a>
                        </div>
                    </div>

                </div>

            </div>
            <!--右边的内容-->
            <div class="firstRight fr">
                <!--用户-->
                <div class="user">
                    <a href="" class="avatar"><img src="images/tx.jpg" alt=""/></a>
                    <p class="username">HI！你好</p>
                    <p class="members">
                        <a href="#" class="gold">领淘金币抵钱</a>
                        <a href="#" class="club">会员俱乐部</a>
                    </p>
                    <div class="btn">
                        <button class="login">登录</button>
                        <button class="register">注册</button>
                        <button class="shop">开店</button>
                    </div>

                </div>
                <!--举报-->
                <a href="#" class="tipOff">
                    <span>网上有害信息举报专区</span><i class="iconfont">&#xf0005;</i>
                </a>

                <!--公告区-->
                <div class="notice">
                    <ul class="title">
                        <li class="active"><a href="#">公告</a></li>
                        <li><a href="#">规则</a></li>
                        <li><a href="#">论坛</a></li>
                        <li><a href="#">安全</a></li>
                        <li><a href="#">公益</a></li>
                    </ul>
                    <ul class="content clearfix">
                        <li class="item1"><a href="#">天猫618进入热身 84个品牌在天猫共获粉丝4.3亿</a></li>
                        <li><a href="#">三只松鼠今日上市</a></li>
                        <li><a href="#">天猫618五折卖车</a></li>
                    </ul>

                </div>

                <!--图标区-->
                <table class="icon">
                    <tr>
                        <td class="item1">
                            <a href="#">
                                <span></span>
                                <i>充话费</i>
                            </a>
                        </td>

                        <td class="item2">
                            <a href="#">
                                <span></span>
                                <i>旅行</i>
                            </a>
                        </td>

                        <td class="item3">
                            <a href="#">
                                <span></span>
                                <i>车险</i>
                            </a>
                        </td>

                        <td class="item4">
                            <a href="#">
                                <span></span>
                                <i>游戏</i>
                            </a>
                        </td>
                    </tr>

                    <tr>
                        <td class="item5">
                            <a href="#">
                                <span></span>
                                <i>彩票</i>
                            </a>
                        </td>

                        <td class="item6">
                            <a href="#">
                                <span></span>
                                <i>电影</i>
                            </a>
                        </td>

                        <td class="item7">
                            <a href="#">
                                <span></span>
                                <i>酒店</i>
                            </a>
                        </td>

                        <td class="item8">
                            <a href="#">
                                <span></span>
                                <i>理财</i>
                            </a>
                        </td>
                    </tr>

                    <tr>
                        <td class="item9">
                            <a href="#">
                                <span></span>
                                <i>找服务</i>
                            </a>
                        </td>

                        <td class="item10">
                            <a href="#">
                                <span></span>
                                <i>演出</i>
                            </a>
                        </td>

                        <td class="item11">
                            <a href="#">
                                <span></span>
                                <i>水电煤</i>
                            </a>
                        </td>

                        <td class="item12">
                            <a href="#">
                                <span></span>
                                <i>火车票</i>
                            </a>
                        </td>
                    </tr>
                </table>

                <!--APP-->
                <div class="app">
                    <div class="title clearfix">
                        <h3 class="fl">阿里APP</h3>
                        <a href="#" class="fr">更多</a>
                    </div>
                    <ul class="appIcon">
                        <li><a href="#"><img src="images/a-dd.jpg" alt=""/></a></li>
                        <li><a href="#"><img src="images/a-jumeiyoupin.jpg" alt=""/></a></li>
                        <li><a href="#"><img src="images/a-taobao.jpg" alt=""/></a></li>
                        <li><a href="#"><img src="images/a-taogongzai.jpg" alt=""/></a></li>
                        <li><a href="#"><img src="images/a-tianmao.jpg" alt=""/></a></li>
                        <li><a href="#"><img src="images/a-xiec.jpg" alt=""/></a></li>
                        <li><a href="#"><img src="images/a-youku.jpg" alt=""/></a></li>
                        <li><a href="#"><img src="images/a-zhifubao.jpg" alt=""/></a></li>
                        <li><a href="#"><img src="images/a-zf.jpg" alt=""/></a></li>
                        <li><a href="#"><img src="images/a-taopp.jpg" alt=""/></a></li>

                    </ul>
                </div>

            </div>

        </div>

        <!--有好货和爱逛街-->
        <div id="layer" class="layer clearfix mt10">
            <!--有好货-->
            <div class="goods fl">
                <div class="head clearfix">
                    <h3 class="fl">
                        <img src="images/yhh.png" alt="有好货"/>
                        <span class="iconfont">&#xe510;</span>
                        <i>与品质生活不期而遇</i>
                    </h3>
                    <a href="#" class="fr change">换一换</a>

                </div>
                <ul class="list">
                    <li>
                        <a href="#"><img src="images/yhh1.jpg" alt=""/></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text"><a href="">《破产姐妹》max最爱</a></p>
                    <a href="#" class="comment">
                        <span class="iconfont">&#xe70e;</span><i>5956 人说好</i>
                    </a>
                    </li>

                    <li>
                        <a href="#"><img src="images/yhh2.jpg" alt=""/></a>
                        <h4><a href="">Gogan 冰种玉镯</a></h4>
                        <p class="text"><a href="">极品冰种 质地极佳</a></p>
                        <a href="#" class="comment">
                            <span class="iconfont">&#xe70e;</span><i>204 人说好</i>
                        </a>
                    </li>

                    <li>
                        <a href="#"><img src="images/yhh3.jpg" alt=""/></a>
                        <h4><a href="">碎脂机 快速瘦身</a></h4>
                        <p class="text"><a href="">精美 好用</a></p>
                        <a href="#" class="comment">
                            <span class="iconfont">&#xe70e;</span><i>127 人说好</i>
                        </a>
                    </li>

                    <li>
                        <a href="#"><img src="images/yhh4.jpg" alt=""/></a>
                        <h4><a href="">钻戒</a></h4>
                        <p class="text"><a href="">精美</a></p>
                        <a href="#" class="comment">
                            <span class="iconfont">&#xe70e;</span><i>66 人说好</i>
                        </a>
                    </li>

                    <li>
                        <a href="#"><img src="images/yhh5.jpg" alt=""/></a>
                        <h4><a href="">北欧装修</a></h4>
                        <p class="text"><a href="">北欧风格</a></p>
                        <a href="#" class="comment">
                            <span class="iconfont">&#xe70e;</span><i>307 人说好</i>
                        </a>
                    </li>

                    <li>
                        <a href="#"><img src="images/yhh1.jpg" alt=""/></a>
                        <h4><a href="">手表</a></h4>
                        <p class="text"><a href="">精美 时尚</a></p>
                        <a href="#" class="comment">
                            <span class="iconfont">&#xe70e;</span><i>19565 人说好</i>
                        </a>
                    </li>

                </ul>

            </div>

            <!--爱逛街-->
            <div class="goods fr shopping">
                <div class="head clearfix">
                    <h3 class="fl">
                        <img src="images/agj.jpg" alt="有好货"/>
                        <span class="iconfont">&#xe510;</span>
                        <i>献给聪明可爱的你</i>
                    </h3>
                    <a href="#" class="fr change">更多</a>

                </div>
                <ul class="list">
                    <li>
                        <a href="#"><img src="images/agj1.jpg" alt=""/></a>
                        <p class="text">
                            <span class="iconfont">&#xe610;</span>
                            <a href="">皮草外套</a></p>
                        <a href="#" class="comment">
                          <span><img src="images/tou1.jpg" alt=""/></span><i>爱逛****001</i>
                        </a>
                    </li>

                    <li>
                        <a href="#"><img src="images/agj2.jpg" alt=""/></a>
                        <p class="text">
                            <span class="iconfont">&#xe610;</span>
                            <a href="">棉线编织地毯 脚感超赞</a></p>
                        <a href="#" class="comment">
                            <span><img src="images/tou2.jpg" alt=""/></span><i>爱逛****002</i>
                        </a>
                    </li>

                    <li>
                        <a href="#"><img src="images/agj3.jpg" alt=""/></a>
                        <p class="text">
                            <span class="iconfont">&#xe610;</span>
                            <a href="">不仅可以在峡谷带你飞 餐桌也可以</a></p>
                        <a href="#" class="comment">
                            <span><img src="images/tou3.jpg" alt=""/></span><i>爱逛****003</i>
                        </a>
                    </li>

                    <li>
                        <a href="#"><img src="images/ahj4.jpg" alt=""/></a>
                        <p class="text">
                            <span class="iconfont">&#xe610;</span>
                            <a href="">南瓜懒人沙发 摆家凹造型</a></p>
                        <a href="#" class="comment">
                            <span><img src="images/tou4.jpg" alt=""/></span><i>爱逛****004</i>
                        </a>
                    </li>

                    <li>
                        <a href="#"><img src="images/agj5.jpg" alt=""/></a>
                        <p class="text">
                            <span class="iconfont">&#xe610;</span>
                            <a href="">粉格小地毯 满足你的少女心</a></p>
                        <a href="#" class="comment">
                            <span><img src="images/tou5.jpg" alt=""/></span><i>爱逛****005</i>
                        </a>
                    </li>

                    <li>
                        <a href="#"><img src="images/agj6.jpg" alt=""/></a>
                        <p class="text">
                            <span class="iconfont">&#xe610;</span>
                            <a href="">少女心的棉球地毯</a></p>
                        <a href="#" class="comment">
                            <span><img src="images/tou6.jpg" alt=""/></span><i>爱逛****006</i>
                        </a>
                    </li>


                    </ul>


            </div>
        </div>

        <!--右侧导航-->
        <div id="tool">
            <span class="iconfont">&#xe605;</span>
            <div class="btn">
                <a href="#" class="c4 active">爱逛 好货</a>
                <a href="#" class="c5">好店 直播</a>
                <a href="#" class="c6">品质 特色</a>
                <a href="#" class="c7">实惠 热卖</a>
                <a href="#" class="c4">猜你 喜欢</a>
                <a href="#" class="item6">反馈</a>
                <a href="#" class="">暴恐 举报</a>
            </div>
        </div>

</body>
</html>